import { StyleSheet, Text, View, Modal, Image, ImageBackground } from 'react-native';
import React, { useEffect, useState } from 'react';
import { DFUEmitter } from 'react-native-nordic-dfu';
import { useTranslation } from 'react-i18next';
import * as Progress from 'react-native-progress';
import { px2dp, scale, width } from '~/utils/px2dp';
import { deviceStore } from '~/store';

interface Props {
    visible: boolean;
    upgradeSuccess: Function;
    onToggleVisible: Function;
}

export default function DfuProGressModal(props: Props) {
    const { t } = useTranslation();
    const { visible, upgradeSuccess, onToggleVisible } = props;
    const [progress, setProgress] = useState(0);
    useEffect(() => {
        DFUEmitter.addListener('DFUProgress', ({ percent }: any) => {
            setProgress(parseInt(percent));
            if (percent == 100) {
                upgradeSuccess && upgradeSuccess();
            }
        });
        DFUEmitter.addListener('DFUStateChanged', ({ state }) => {
            if (state == 'DFU_STATE_FAILED') {
                Toast.show({ content: t('DfuProGressModal.t1') });
                deviceStore.disConnectble();
                onToggleVisible && onToggleVisible();
            }
        });
        return () => {
            DFUEmitter.removeAllListeners('DFUProgress');
            DFUEmitter.removeAllListeners('DFUStateChanged');
        };
    }, []);

    return (
        <Modal visible={visible} transparent animationType="slide">
            <View style={styles.modalBackground}>
                <View style={styles.modalContainer}>
                    <Image
                        source={require('~/assets/deviceTools/upgrading.png')}
                        resizeMode="cover"
                        style={styles.upgrading}
                    />
                    <Text style={styles.t1}>{t('DfuProGressModal.t2')}</Text>
                    <Text style={styles.t1}>{t('DfuProGressModal.t3')}</Text>
                    <Text style={styles.t1}>{t('DfuProGressModal.t4')}</Text>
                    {progress == 0 && <Text style={styles.tips}>{t('DfuProGressModal.t5')}</Text>}
                    {progress > 0 && (
                        <View style={[styles.progress]}>
                            <Progress.Bar
                                progress={progress / 100}
                                width={width / 1.8}
                                borderColor="#1DCE87"
                                color="#1DCE87"
                            />
                            <ImageBackground
                                source={require('~/assets/deviceTools/upgradingBox.png')}
                                resizeMode="contain"
                                style={styles.progress_img}>
                                <Text style={styles.progress_text}>{progress}%</Text>
                            </ImageBackground>
                        </View>
                    )}
                </View>
            </View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    modalBackground: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    modalContainer: {
        backgroundColor: 'white',
        padding: px2dp(24),
        width: '80%',
        borderRadius: px2dp(24),
    },
    upgrading: {
        position: 'absolute',
        top: px2dp(-120),
        width: px2dp(220),
        height: px2dp(220),
        alignSelf: 'center',
    },
    t1: {
        marginTop: px2dp(24),
        fontSize: scale(28),
        lineHeight: px2dp(40),
        color: '#a4a4a4',
    },
    tips: {
        color: '#a4a4a4',
        fontSize: scale(32),
        textAlign: 'center',
        marginTop: px2dp(24),
    },
    progress: {
        marginTop: px2dp(32),
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    progress_img: {
        width: px2dp(100),
        height: px2dp(80),
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    progress_text: {
        color: '#fff',
        fontSize: scale(28),
    },
});
